<template>
	<view class="grade-comparison-card">
		<view class="card-header">
			<text class="card-title">等级对比</text>
			<view class="header-right">
				<text class="view-list-btn" v-if="showViewButton" @click="handleViewList">查看名单 ></text>
				<view class="info-icon">ⓘ</view>
			</view>
		</view>
		
		<!-- 等级图表 -->
		<view class="grade-chart">
			<view class="grade-section">
				<view class="a-grade">
					<text class="grade-letter">A</text>
					<text class="grade-desc">等级评定</text>
				</view>
			</view>
			<view class="grade-labels">
				<text class="grade-label">B</text>
				<text class="grade-label">C</text>
				<text class="grade-label">D</text>
			</view>
		</view>
		
		<!-- 等级统计表格 -->
		<view class="grade-table">
			<view class="table-header">
				<text class="header-cell">班级</text>
				<text class="header-cell">实考人数</text>
				<text class="header-cell">达线人数</text>
				<text class="header-cell">达线占比</text>
			</view>
			
			<view class="table-row" v-for="gradeData in gradeComparisonData" :key="gradeData.class">
				<text class="table-cell">{{ gradeData.class }}</text>
				<text class="table-cell">{{ gradeData.actualCount }}</text>
				<text class="table-cell">{{ gradeData.passCount }}</text>
				<text class="table-cell">{{ gradeData.passRate }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GradeComparison',
	props: {
		gradeComparisonData: {
			type: Array,
			default: () => [
				{ class: '2208班', actualCount: '50', passCount: '10', passRate: '5%' },
				{ class: '2208班', actualCount: '10', passCount: '50', passRate: '5%' },
				{ class: '2208班', actualCount: '50', passCount: '10', passRate: '5%' },
				{ class: '2208班', actualCount: '10', passCount: '50', passRate: '5%' },
				{ class: '2208班', actualCount: '50', passCount: '10', passRate: '5%' }
			]
		},
		// 是否显示查看名单按钮
		showViewButton: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleViewList() {
			this.$emit('view-list');
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@white: #fff;
@border-color: #f0f0f0;

.grade-comparison-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @text-color;
		}

		.header-right {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.view-list-btn {
				font-size: 24rpx;
				color: @primary-color;
				cursor: pointer;
				transition: all 0.2s;

				&:active {
					opacity: 0.7;
				}
			}

			.info-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #e0e0e0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18rpx;
				color: @text-light;
			}
		}
	}

	.grade-chart {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		position: relative;

		.grade-section {
			position: relative;

			.a-grade {
				width: 120rpx;
				height: 120rpx;
				background: #4CAF50;
				border-radius: 50% 50% 0 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				transform: rotate(-45deg);

				.grade-letter {
					font-size: 48rpx;
					font-weight: bold;
					color: @white;
					transform: rotate(45deg);
				}

				.grade-desc {
					font-size: 18rpx;
					color: @white;
					transform: rotate(45deg);
				}
			}
		}

		.grade-labels {
			position: absolute;
			top: -20rpx;
			right: -60rpx;
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.grade-label {
				font-size: 24rpx;
				color: @text-light;
				font-weight: bold;
			}
		}
	}

	.grade-table {
		width: 100%;

		.table-header {
			display: flex;
			background: #f1f3f4;
			padding: 16rpx 0;
			border-radius: 8rpx 8rpx 0 0;
			margin-bottom: 8rpx;

			.header-cell {
				flex: 1;
				text-align: center;
				font-size: 22rpx;
				font-weight: bold;
				color: @text-light;
			}
		}

		.table-row {
			display: flex;
			padding: 16rpx 0;
			border-bottom: 1rpx solid @border-color;

			&:last-child {
				border-bottom: none;
			}

			.table-cell {
				flex: 1;
				text-align: center;
				font-size: 24rpx;
				color: @text-color;
			}
		}
	}
}
</style>
